<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>房间信息</title>

<link rel="stylesheet" href="js/bootstrap2/css/bootstrap.min.css">
<link rel="stylesheet" href="js/bootstrap2/css/bootstrap-table.css">
<link rel="stylesheet" href="css/common.css">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/layui-v2.1.5/layui/layui.all.js"></script>
<script src="js/bootstrap2/js/bootstrap-table.js"></script>
<script src="js/bootstrap2/js/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript" src="js/sharefunction.js"></script>
<script type="text/javascript" src="<%=basePath%>js/My97DatePicker/WdatePicker.js"></script> 
<style type="text/css">
	#roomNum th,#roomHistory th {
		background: #d70b16;
		color: #fff;
	}
	.foot,.fixed-table-footer{
		text-align: left !important;
		/* padding-right: 50px !important; */
	}
	.content,#roomNum tbody{
		background:#eee;
	}
	.fixed-table-footer{
    border-bottom: 1px solid #dddddd;
	}
	.heBackground{
		background-image: url("images/he_red.png");
		background-repeat: no-repeat;
		background-position: 5px 10px;
	}
	.btn{line-height:16px;}
</style>
</head>
<body>
	<div style="margin:20px 0px;">
		<table id="roomNum" class="table ">
			<%-- <thead>
				<tr>
					<th>房间号</th>
					<th>建筑面积</th>
					<th>套内建面</th>
					<th>户型</th>
					<th>朝向</th>
					<th>用途</th>
					<th>状态</th>
					<th>客户</th>
				</tr>
			</thead>
			<tbody class="content" style="height:100px">
				<c:if test="${empty requestScope.roomList }">
					<tr>
						<td colspan="8" >没有找到匹配的记录</td>
					</tr>
				</c:if>
				<c:forEach items="${requestScope.roomList }" var="t" >
					<tr>
						<td style="width: 70px;" <c:if test="${pageScope.t.roomMerge==1 }">class="heBackground"</c:if> >
							${pageScope.t.roomNum } 
						</td>
						<td class="buildingArea">${pageScope.t.buildingArea } ㎡</td>
						<td class="setInArea">${pageScope.t.setInArea } ㎡</td>
						<td>${pageScope.t.houseType }</td>
						<td>${pageScope.t.direction }</td>
						<td>${pageScope.t.roomUse }</td>
						<td>${pageScope.t.roomStatus }</td>
						<td>${pageScope.t.customerName }</td>
					</tr>
				</c:forEach>
			</tbody>
			<tfoot class="content1" >
				<tr>
					<td>总面积</td>
					<td class="buildingAreaSum">- ㎡</td>
					<td class="setInAreaSum">- ㎡</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</tfoot> --%>
		</table>
		<br>
		<input type="button" value="查看历史" onclick="showHistory()"  class="btn btn-danger radius customerEdit"><br><br>
		<table id="roomHistory" class="table table-bordered" hidden="hidden">
			
		</table>
	</div>
	<input value="${roomId }" hidden="hidden" id="roomId" name="roomId">
	<!-- 退租时间模版 -->
	<div id="dateTp2" style="display: none;" >
		<div style="margin: 5px auto;width: 340px;text-align: center;" >
			<span>拆分日期:</span>
			<input type="text" style="width: 170px;" name="leaveDate" id="leaveDate" class="Wdate" onClick="WdatePicker({ dateFmt: 'yyyy-MM-dd'})"/> 
			<br>
			<button class="btn btn-danger" onclick="outLeaveRun(this);" >确定拆分</button>
		</div>
	</div>
	<!-- 修改扩租时间模版 -->
	<div id="dateTp3" style="display: none;" >
		<div style="margin: 5px auto;width: 340px;text-align: center;" >
			<span style="margin-left: -52px;">日期:</span>
			<input type="text" style="width: 170px;" name="extDate" id="extDate" class="Wdate" onClick="WdatePicker({ dateFmt: 'yyyy-MM-dd'})"/> 
			<br><span>备注:</span>
			<textarea rows="3" cols="70" style="width: 65%" name="remark"></textarea>
			<br>
			<button class="btn btn-danger" onclick="edit(this);" >保存修改</button>
		</div>
	</div>
</body>

<script type="text/javascript">
	function actionFormatter(value, row, index) {
		var date = new Date(row.createDate).format("yyyy-MM-dd");
		var roomId = $("#roomId").val();
		var html="<a class='btn btn-info' onClick='extLease(\"" + row.customerId + "\",\"" + row.cusIndentity + "\",\"" + row.roomId + "\")'>合并</a>";//扩租
		html +="&nbsp;&nbsp;<a class='btn btn-info' onClick='outLease(\"" + row.customerId + "\",\"" + row.cusIndentity + "\",\"" + row.roomId + "\")'>拆分</a>";//退租
		html +="&nbsp;&nbsp;<a class='btn btn-info' onClick='toEdit(\"" + row.mapId + "\",\"" + date + "\",\"" + row.remark + "\")'>编辑</a>";//编辑
		return html;
	}
	
	//扩租方法,点击打开房间列表，选择房间进行扩租  （合并）
	function extLease(cid,cusIndentity,roomId){//parent.roomId   当前查询房间
		var fkbuildId = "null";//parent.fkbuildId;
		top.layer.open({
			type : 2,
			title : '房间选择',
			shadeClose : false,
			shade : 0.1,
			maxmin : true, //开启最大化最小化按钮
			area : [ '90%', '80%' ],
			end:function(){
				location.reload();
				parent.updateRoomNotClick();
			},//销毁回调,刷新当前页
			content : 'roomInfo/toRoomList/'+parent.buildFloorId+'/'+roomId+'/'+cid+'/'+cusIndentity+"/"+fkbuildId
		});
	}
	
	//退租（拆分）
	var customer_id = "-";
	var room_Id = "";
	function outLease(customerId,cusIndentity,roomId){
		customer_id = customerId;
		room_Id = roomId;
		layer.open({
	      type: 1,
	      title: '拆分',
	      shadeClose: false,
	      shade: [0.1,"#fff"],
	      maxmin: false, //开启最大化最小化按钮
	      offset:'15%',
	      area: ['360px', '150px'],
	      content: $("#dateTp2").html()
	    });
	}
	
	//修改编辑时间
	var mapId = "";
	function toEdit(id,value,remark){
		$("#dateTp3").find("input[name='extDate']").attr("value",value);
		$("#dateTp3").find("textarea[name='remark']").text(remark);
		mapId = id;
		layer.open({
	      type: 1,
	      title: '编辑',
	      shadeClose: false,
	      shade: [0.1,"#fff"],
	      maxmin: false, //开启最大化最小化按钮
	      offset:'15%',
	      area: ['400px', '250px'],
	      content: $("#dateTp3").html()
	    });
	}
	//编辑
	function edit(obj){
		//获取到迁出时间
		var v = $(obj).prevAll("input").val();
		var remark = $(obj).parent().find("textarea[name='remark']").val();
		$.post("customerInfo/toEditMap",{mapId:mapId,extDate:v,remark:remark},function(data,status){
			layer.close(layer.index);
			layer.alert(data.msg,{
				shade: [0.1,"#fff"],
			},function(){
				location.reload();
			});
		},"json"); 
	}
	//执行确定退租（拆分）
	function outLeaveRun(obj){
		//获取到迁出时间
		var v = $(obj).prevAll("input").val();
		$.post("customerInfo/outLeaveCustomer",{customerId:customer_id,roomId:room_Id,leaveTime:v},function(data,status){
			layer.close(layer.index);
			var msg;
			if(data.msg=="success"){
				msg="拆分成功";
			}else{
				msg="拆分失败";
			}
			layer.alert(msg,{
				shade: [0.1,"#fff"],
			},function(){
				location.reload();
				parent.updateRoomNotClick();
			});
		},"json");
	}
	$(function(){
		 var roomId = $("#roomId").val();
		//初始化表格,动态从服务器加载数据  
		$("#roomNum").bootstrapTable({
			method : "post", //使用get请求到服务器获取数据  
			url : "roomInfo/getCustomerRoomList", //获取数据的Servlet地址  
			striped : false, //表格显示条纹  
			pagination : true, //启动分页  
			pageSize : 10, //每页显示的记录数  
			pageNumber : 1, //当前第几页  
			pageList : [ 5, 10, 15, 20, 25 ], //记录数可选列表  
			sidePagination : "server", //表示服务端请求  
			showFooter:true,
			contentType : 'application/x-www-form-urlencoded',
			//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder  
			//设置为limit可以获取limit, offset, search, sort, order  
			queryParamsType : "undefined",
			queryParams : function queryParams(params) { //设置查询参数  
				var param = {
					pageNumber : params.pageNumber,
					pageSize : params.pageSize,
					roomId : roomId
				};
				return param;
			},
			columns : [ {
				field : 'roomNum',
				title : '房间号'
				,footerFormatter:"总面积"
			}, {
				field : 'buildingArea',
				title : '建筑面积',
				formatter:function(value,row,index){
					return row.buildingArea.toFixed(2)+" ㎡";
				},
				footerFormatter:function(value){//先注释掉面积求和
				   var count = 0;
		           for (var i=0; i<value.length;i++) {
		               count += parseFloat(JSON.parse(JSON.stringify(value[i])).buildingArea);
		           }
		           return count.toFixed(2) +" ㎡";
			} 
			}, {
				field : 'setInArea',
				title : '套内建面',
				formatter:function(value,row,index){
					return row.setInArea.toFixed(2)+" ㎡";
				},
				footerFormatter:function(value){// 先注释掉面积求和
					var count = 0;
					for (var i=0; i<value.length;i++) {
					    count += parseFloat(JSON.parse(JSON.stringify(value[i])).setInArea);
					}
					return count.toFixed(2) +" ㎡";
				} 
			}, {
				field : 'houseType',
				title : '户型'
			}, {
				field : 'createDate',
				title : '时间',
				formatter : 'dataFormat'
			},{
				field : 'direction',
				title : '朝向'
			}, {
				field : 'roomUse',
				title : '用途'
			}, {
				field : 'remark',
				title : '备注'
			},{
				field : 'status',
				title : '操作类型',
				formatter:'actionFormatter'
			}]
		});
		sumArea();
		
		
	});
	
	//日期格式化
	function dataFormat(value, row, index) {
		var date = "--";
		if(value != undefined){
			date = new Date(value).format("yyyy-MM-dd");
		}
		return date;
	};
	
	//查看历史变更记录
	function showHistory(){
		$("#roomHistory").show();
		 var roomId = $("#roomId").val();
		//初始化表格,动态从服务器加载数据  
		$("#roomHistory").bootstrapTable({
			method : "post", //使用get请求到服务器获取数据  
			url : "roomInfo/getCustomerRoomHisList", //获取数据的Servlet地址  
			striped : true, //表格显示条纹  
			pagination : true, //启动分页  
			pageSize : 5, //每页显示的记录数  
			pageNumber : 1, //当前第几页  
			pageList : [ 5, 10, 15, 20, 25 ], //记录数可选列表  
			sidePagination : "server", //表示服务端请求  
			contentType : 'application/x-www-form-urlencoded',
			//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder  
			//设置为limit可以获取limit, offset, search, sort, order  
			queryParamsType : "undefined",
			queryParams : function queryParams(params) { //设置查询参数  
				var param = {
					pageNumber : params.pageNumber,
					pageSize : params.pageSize,
					roomId : roomId
				};
				return param;
			},
			columns : [ {
				field : 'leaveDate',
				title : '时间',
				formatter : 'dataFormat'
			}, {
				field : 'hstatus',
				title : '操作',
			}, {
				field : 'roomNum',
				title : '涉及房间',
				
			},{
				field : 'propertyName',
				title : '产权人',
			
			},{
				field : 'customerName',
				title : '租赁人',
			
			}]
		});
	}
	//计算总面积
	function sumArea(){
 		//建筑面积求和
		var sum=0;
		$(".buildingArea").each(function(i,v){
			var t=$(v).text();
			t=t.substring(0,t.indexOf("㎡")).trim();
			sum+=parseFloat(t);
		});//㎡
		$(".buildingAreaSum").text(sum+" ㎡");
		
		//套内面积求和
		sum=0;
		$(".setInArea").each(function(i,v){
			var t=$(v).text();
			t=t.substring(0,t.indexOf("㎡")).trim();
			sum+=parseFloat(t);
		});
		$(".setInAreaSum").text(sum+" ㎡");
	} 
</script>
</html>